import Sty from "../../style/publish/index.module.css";
import { NavBar, Input, ImageUploader, Toast, TextArea } from 'antd-mobile'
import { useHistory, useLocation } from "react-router";
import { useEffect, useState } from "react";
import { RightOutline } from 'antd-mobile-icons'
import { ImageUploadItem } from 'antd-mobile/es/components/image-uploader';
import Unit from "../../unit/unit"
import { promises } from "fs";


export default () => {
  let location = useLocation()
  let history = useHistory()
  let { state } = location;
  const back = () => history.goBack()
  const [valueList, setValueList]: any = useState({
  })
  const [imgArr, setImgArr]: any = useState([])
  const [formList, seFormFile]: any = useState([])


  const maxCount = 6
  const [fileList, setFileList] = useState<ImageUploadItem[]>([
  ])
  const upload = (file: File) => {
    imgArr.push({ src: file.name })
    formList.push(file)
    setValueList({ ...valueList, img_url: imgArr })


    return ({
      url: URL.createObjectURL(file),

    })
  }

  const upload1 = () => {
    const formData = new FormData();
    for (let i = 0, len = formList.length; i < len; i++) {
      formData.append('files', formList[i]);
    }
    console.log(valueList)
    let a = Unit.postApi2("http://localhost:8888/api/publish/upload", {
      ...valueList
    }).then(res => {
      console.log(res)

    })
    let b = Unit.postApi2("http://localhost:8888/api/publish/img/upload", formData).then(res => {
      console.log(res)

    })
    Promise.allSettled([a, b]).then((res) => {
      console.log(res)
      history.replace("/publish")
    })

  }
  const deleteImg = (file: File) => {
    let ind = fileList.findIndex((item: any) => item.url == Object.values(file))
    imgArr.splice(ind, 1)
  }
  useEffect(() => {
    if (state) {
      setValueList({ ...valueList, type: state, big_type: '商品' })
    } else {
      setValueList({ ...valueList, big_type: '话题' })

    }
  }, [])

  return <>
    <div className={Sty.top}>
      <NavBar onBack={back}>发布{state ? '闲置' : '话题'}</NavBar>
    </div>
    <div className={Sty.publish_submit}>
      <div className={Sty.title}>
        <Input
          placeholder='添加标签'
          value={valueList.title}
          onChange={val => {
            setValueList({ ...valueList, title: val })
          }
          }
        />
        <RightOutline />
      </div>
      <div className={Sty.add}>
        <p className={state ? Sty.add_title : Sty.none}>添加照片</p>
        <p className={state ? Sty.add_des : Sty.none}>照片越详细越容易让人光顾呦!</p>

        <div className={ Sty.content}>
          <TextArea
            placeholder='请输入内容'
            value={valueList.des}
            onChange={val => {
              setValueList({ ...valueList, des: val })
            }}
          />
        </div>
        <div className={Sty.add_img_box}>
          <ImageUploader
            upload={upload as any}
            onChange={setFileList}
            value={fileList}
            multiple
            maxCount={maxCount}
            onDelete={deleteImg as any}
            showUpload={fileList.length < maxCount}
            onCountExceed={exceed => {
              Toast.show(`最多选择 ${maxCount} 张图片，你多选了 ${exceed} 张`)
            }}
          />

        </div>
      </div>
      <div className={state ? Sty.title1 : Sty.none}>
        <div>预计价格</div>
        <div className={Sty.doller}>
          <span>￥</span>
          <Input

            value={valueList.price}
            onChange={val => {
              setValueList({ ...valueList, price: val })

            }}
          />
        </div>
      </div>
      {/* 提交 */}
      <div className={state ? Sty.submit : Sty.none} onClick={upload1}>提交</div>
      <div className={!state ? Sty.submit1 : Sty.none} onClick={upload1}>确认发布</div>


    </div>

  </>
}